import { BasicFormBox, DataQueryDetailPage } from "@pkg";
type f = {
	form: {
		select?: any[];
		inputGroup: string;
	};
};

type t = {
	table: {
		name: string;
		char: string;
		address: string;
		id: string;
		img?: string;
		hasChildren?: boolean;
		children?: t["table"][];
	};
};

class D extends DataQueryDetailPage<f, t> {
	private table = super.initTable(
		"table",
		{},
		{
			treeProps: {
				rowKey: "char",
			},
		}
	);
	constructor() {
		super("_D__test", {
			mounted() {
				console.log("mounted");
			},
		});
		const form = super.initForm("form", {
			layout: "vertical",
			labelWidth: "80px",
		});

		fillForm(form, this);
		this.init();

		this.setLayout([
			{ block: "1", "name": "form", sort: 2, title: "表单一" },
			{ block: "2", "name": "table", sort: 1, title: "表格一" },
		]);
	}

	init() {
		this.table.addTableCol({
			key: "name",
			name: "名字",
		});
		this.table.addTableCol({
			key: "char",
			name: "字",
		});
		this.table.addTableCol({
			key: "address",
			name: "地址",
		});
		this.table.addTableCol({
			key: "img",
			name: "地址",
			component: "TableImage",
		});

		this.table.setTableSource([
			{
				name: "孔融",
				char: "文举",
				address: "鲁国曲阜",
				id: "1",
				children: [{ name: "陈琳1", char: "孔璋1", address: "广陵射阳1", id: "1-2" }],
			},
			{
				name: "陈琳",
				char: "孔璋",
				address: "广陵射阳",
				id: "2",
				img: "https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0",
			},
			{
				name: "阮瑀",
				char: "元瑜",
				address: "陈留尉氏",
				id: "3",
				img: "https://ts1.cn.mm.bing.net/th/id/R-C.b49dbddffaa692d75988e0c5882dacca?rik=r6IIYs2muimY7A&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140529%2f1-140529145A4.jpg&ehk=Co9XURYRCjJXUTzFG0Mw6lD7olzDKceEgv3slEC8kvQ%3d&risl=&pid=ImgRaw&r=0",
			},
			{
				name: "徐干-伟长-北海剧县北海剧县北海剧县北海剧县北海剧县北海剧县北海剧县北海剧县北海剧县北海剧县",
				char: "伟长",
				address: "北海剧县",
				id: "4",
			},
			{ name: "王粲", char: "仲宣", address: "山阳高平", id: "5" },
			{ name: "应玚", char: "德琏", address: "汝南南顿", id: "6" },
			{ name: "刘桢", char: "公干", address: "东平宁阳", id: "7" },
		]);
		this.table.setTotal(7);
		this.table.setChildTable({
			rowKey: "id",
			"hasChildren": "hasChildren",
		});
		// this.table.setDispalyPaginator(false);
	}
}

// function fillTable(table: BasicTaleBox<t["table"]>) {

// }

function fillForm(form: BasicFormBox<f["form"]>, _this: D) {
	form.addFormItem({
		key: "inputGroup",
		label: "组",
		value: "zhangsan, lisi, wangwu",
		component: "InputGroup",
		placeholder: "组啊",
		disabled: true,
		conf: {
			ban: true,
		},
	});

	form.addFormItem({
		key: "select",
		label: "zhangs",
		value: "1",
		component: "Select",
		conf: {
			change(val) {
				console.log(val, " change before ");
			},
			options: [],
		},
	});

	form.addFormButton({
		label: "set",
		key: "1",
		click() {
			// form.setFormValue({
			// 	inputGroup: "1,2,3,4,5",
			// });
			form.setFormItemConf("select", {
				component: "Select",
				conf: {
					options: [
						{ label: "hahaha", value: "1" },
						{ label: "hahaha2", value: "2" },
						{ label: "hahaha3", value: "3" },
					],
				},
			});
		},
	});

	form.addFormButton({
		label: "get",
		key: "2",
		click() {
			console.log(form.getFormValue());
			// console.log(table.)
			console.log(_this.getTable("table").getTotal(), "_this");
		},
	});

	form.addFormButton({
		label: "reset",
		key: "12",
		click() {
			form.setFormValue({
				inputGroup: "zhangsan, lisi, wangwu, zhaoliu",
			});
		},
	});
}

export const d = new D();
